<template>
	<div>
		<el-card class="filter-card">
		  <div slot="header" class="clearfix">
				<!-- 面包屑路径 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item>文章列表</el-breadcrumb-item>
				</el-breadcrumb>
				 <el-link href="add" type="success">文章添加</el-link>
		  </div>
		  <!-- 数据筛选表单 -->
		  <el-form size="mini">
		  	<el-form-item label="状态">
		  		<el-radio-group v-model="form.resource">
		  			<el-radio label="全部"></el-radio>
		  			<el-radio label="草稿"></el-radio>
		  			<el-radio label="待审核"></el-radio>
		  			<el-radio label="审核通过"></el-radio>
		  			<el-radio label="审核失败"></el-radio>
		  			<el-radio label="已删除"></el-radio>
		  		</el-radio-group>
		  	</el-form-item>
		  	<el-form-item label="频道">
		  		<el-select v-model="form.region" placeholder="请选择频道">
		  			<el-option label="区域一" value="shanghai"></el-option>
		  			<el-option label="区域二" value="beijing"></el-option>
		  		</el-select>
		  	</el-form-item>
		  	<el-form-item label="日期">
		  		<el-date-picker
		  			v-model="form.date1"
		  			type="datetimerange"
		  			start-placeholder="开始日期"
		  			end-placeholder="结束日期"
		  			:default-time="['12:00:00']">
		  		</el-date-picker>
		  	</el-form-item>
		  	<el-form-item>
		  		<el-button type="primary" @click="onSubmit">查询</el-button>
		  	</el-form-item>
		  </el-form>
		</el-card>
		<el-card class="table-card">
		  <div slot="header" class="clearfix">
		    <span>卡片名称</span>
		  </div>
		  <!-- 表格 -->
		  <el-table :data="articles">
				<el-table-column prop="images" label="封面"></el-table-column>
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column label="状态">
					<!-- 如果需要在自定义列模板中获取当前遍历项数据，那么就在 template 上声明 slot-scope="scope" -->
					<template slot-scope="scope">
						<el-tag :type="articleStatus[scope.row.status].type">{{articleStatus[scope.row.status].text}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="pubdate" label="时间"></el-table-column>
				<el-table-column prop="date" label="操作">
					<template>
						<el-button size="mini" circle icon="el-icon-edit" type="primary"></el-button>
						<el-button size="mini" circle icon="el-icon-delete" type="danger"></el-button>
					</template>
				</el-table-column>
		  </el-table>
			<!-- 分页 -->
			<el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange" :page-size="pageSize"/>
		</el-card>
		
	</div>
</template>

<script>
	import { getArticle } from '@/api/request/article.js'
	export default{
		data () {
			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				articles:[],
				articleStatus: [
				  { status: 0, text: '草稿', type: 'info' },
				  { status: 1, text: '待审核', type: '' },
				  { status: 2, text: '审核通过', type: 'success' },
				  { status: 3, text: '审核失败', type: 'warning' },
				  { status: 4, text: '已删除', type: 'danger' }
				],
				total:0,
				pageSize:10
			}
		},
		created(){
			this.loadArticle()
		},
		methods: {
			onSubmit () {
				console.log('submit!')
			},
			loadArticle(page=1){
				getArticle({
					page,
					per_page:this.pageSize
				}).then(res=>{
					this.articles=res.data.data.results
					this.total=res.data.data.total_count
				})
			},
			currentChange(page){
				this.loadArticle(page)
			}
		}	
	}
</script>

<style scoped lang="less">
	.filter-card{
		margin-bottom: 15px;
		.clearfix{
			display: flex;
			justify-content: space-between;
		}
	}
</style>
